<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {
    height: 100vh;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    justify-content: center;
    align-content: center;
  }
  .box-item {
    width: 100%;
    font-size: 20px;
    text-align: center;
    background: tomato;
    box-sizing: border-box;
    border: green 3px solid;
  }
  .item1 {
    grid-column: 1 / span 2;
  }
  .item2 {
    grid-column-start: 3;
    grid-row: 1 / span 2;
  }
  .item3 {
    grid-row: 2 / span 2;
  }
  .item5 {
    grid-column: 2 / span 2;
  }
</style>
<body>
  <div class="box">
    <div class="box-item item1">1</div>
    <div class="box-item item2">2</div>
    <div class="box-item item3">3</div>
    <div class="box-item item4">4</div>
    <div class="box-item item5">5</div>
  </div>
</body>
</html>
<script>
  // es6
  // let const 解构赋值 对象的静态方法 箭头函数 扩展运算符 class  for...of Promise async
  // Object.keys Object.values Object.entries 
  // Object.assign

  // const obj1 = { name: 'aaaa', age: 22 }
  // const obj2 = { name: 'bbb', sex: '男' }
  // const obj3 = Object.assign({}, obj1, obj2)
  // console.log(obj1)
  // console.log(obj2)
  // console.log(obj3)


  // for in 遍历
  // const arr = ['a', 'b', 'c', 'd']
  // for (let k in arr) {
  //   console.log(k, arr[k])
  // }

  // for...of 可以遍历 数组、字符串、Set对象、Map对象，不能遍历普通对象
  // for in 遍历对象
  // for (let item of arr ) {
  //   console.log(item)
  // }

  // Set对象：特点每一项都不会重复，有序排列
  // const set = new Set([1,2,3,4,3,2,1,9])
  // set.add('dddd')
  // set.clear()
  // set.delete(9)
  // console.log(set.entries())
  // set.forEach(item => {
  //   console.log(item)
  // })
  // console.log(set.has('100'))
  // console.log(set)
  // for (let item of set.entries()) {
  //   console.log(item)
  // }
  // console.log([...new Set([1,2,3,4,3,2,1,9])])

  // const s = new Set([
  //   { a: 100 },
  //   { a: 100 },
  //   100,
  //   200,
  //   100
  // ])
  // console.log(s)

  // map: key/value 形式存储数据
  // 普通对象的key只能是字符串，map 对象的 key 可以是任意类型
  // const a1 = { a: 'aaa' }
  // const a2 = [1]
  // const map = new Map([
  //   [123, 'abc'],
  //   [a1, ['bbbbbb']]
  // ])
  // map.set('aaaa', 10000)
  // map.set(true, false)
  // map.set(a2, 'abcdefg')
  // console.log(map)
  // // map.forEach((value, key) => {
  // //   console.log(typeof key, key, value)
  // // })
  // console.log(map.get(a2))

  

  // const obj = {
  //   a: 100,
  //   b: 2000,
  //   true: false,
  //   100: 200
  // }
  // console.log(Object.keys(obj))


  // console.log(document.querySelector('.box').dataset.id)



</script>